<template>
  <div class="card mb-4">
    <div class="card-header pb-0">
      <h6>工厂管理</h6>
      <!-- <vsud-button color="dark" variant="gradient" @click="addVisible = true">
        <i class="fas fa-plus me-2"></i>
        新增设备
      </vsud-button> -->
      <div class="input-group">
        <input
          type="text"
          class="form-control"
          :placeholder="'请输入工厂名称/工厂主昵称...'"
          v-model="searchNum"
        />
        <span class="input-group-text text-body search-btn" @click="search" v-if="!showReset">
          <i  class="fas fa-search" aria-hidden="true"></i>
        </span>
        <span class="input-group-text text-body search-btn" @click="reset" v-if="showReset">
          <el-icon ><CloseBold /></el-icon>
        </span>
      </div>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
      <div class="table-responsive p-0">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th
                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                工厂名称
              </th>
              <th
                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                在线情况
              </th>
              <th
                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                工厂类型
              </th>
              <th
                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                工厂简介
              </th>
              <th class="text-center text-xxs font-weight-bolder opacity-7">
                操作
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in form" :key="index">
              <td>
                <div class="d-flex px-2 py-1">
                  <div class="d-flex flex-column justify-content-center">
                    <el-badge value="封停中" class="item" v-if="item.isOpen">
                      <h6 class="mb-0 text-sm">{{ item.name }}</h6></el-badge
                    >
                    <h6 class="mb-0 text-sm" v-else>{{ item.name }}</h6>
                    <p class="text-xs text-secondary mb-0">
                      工厂主： {{ item.number }}
                    </p>
                  </div>
                </div>
              </td>
              <td>
                <vsud-badge
                  color="primary"
                  variant="gradient"
                  size="sm"
                  v-if="item.type === '在线'"
                >
                  {{ item.type }}
                </vsud-badge>
                <vsud-badge
                  color="secondary"
                  variant="gradient"
                  size="sm"
                  v-if="item.type === '离线'"
                >
                  {{ item.type }}
                </vsud-badge>
                <vsud-badge
                  color="warning"
                  variant="gradient"
                  size="sm"
                  v-if="item.type === '封停'"
                >
                  {{ item.type }}
                </vsud-badge>
              </td>
              <td class="align-middle text-center text-sm">
                {{ item.size }}
              </td>
              <td class="align-middle text-center">
                <span class="text-secondary text-xs font-weight-bold">{{
                  item.describe
                }}</span>
              </td>
              <td
                class="align-middle text-center"
                style="justify-content: center"
              >
                <a
                  class="btn btn-link text-danger text-gradient px-3 mb-0"
                  @click="set(item.number, 'delete')"
                >
                  <i class="far fa-trash-alt me-2" aria-hidden="true"></i>删除
                </a>
                <a
                  class="btn btn-link text-dark px-3 mb-0"
                  @click="set(item.number, 'edit')"
                >
                  <i
                    class="fas fa-pencil-alt text-dark me-2"
                    aria-hidden="true"
                  ></i
                  >编辑
                </a>
                <a
                  class="btn btn-link text-dark px-3 mb-0 align-items-center"
                  v-if="item.isOpen"
                  @click="item.isOpen = !item.isOpen"
                >
                  <el-icon style="font-size: 15px; vertical-align: middle"
                    ><CirclePlusFilled
                  /></el-icon>
                  开启
                </a>
                <a
                  class="btn btn-link text-dark px-3 mb-0 align-items-center"
                  v-if="!item.isOpen"
                  @click="item.isOpen = !item.isOpen"
                >
                  <el-icon style="font-size:15px vertical-align:middle"
                    ><CloseBold
                  /></el-icon>
                  封停
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-pagination layout="prev, pager, next" :total="50" />
    </div>
  </div>
  <!-- 编辑弹窗 -->
  <el-dialog v-model="editVisible" title="编辑工厂信息" width="40%">
    <el-form :model="selectEquip">
      <el-form-item label="工厂主：" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.number"></el-input>
      </el-form-item>
      <el-form-item label="工厂名称" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.name"></el-input>
      </el-form-item>
      <el-form-item label="在线情况" :label-width="formLabelWidth">
        <!-- <el-select v-model="selectEquip.type">
          <el-option
            v-for="item in types"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select> -->
        <el-input v-model="selectEquip.type" disabled></el-input>
      </el-form-item>
      <el-form-item label="工厂类型" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.size" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="工厂简介" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.describe" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="edit(selectEquip.number)"
          >确定</el-button
        >
        <el-button @click="editVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增弹窗 -->
  <el-dialog v-model="addVisible" title="新增工厂信息" width="40%">
    <el-form :model="newEquip">
      <el-form-item label="工厂主：" :label-width="formLabelWidth">
        <el-input v-model="newEquip.number" disabled>#fw3253t563</el-input>
      </el-form-item>
      <el-form-item label="工厂名称" :label-width="formLabelWidth">
        <el-input v-model="newEquip.name"></el-input>
      </el-form-item>
      <el-form-item label="工厂类别" :label-width="formLabelWidth">
        <!-- <el-select v-model="newEquip.type">
          <el-option
            v-for="item in types"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select> -->
        <el-input v-model="newEquip.type"></el-input>
      </el-form-item>
      <el-form-item label="工厂类型" :label-width="formLabelWidth">
        <el-input v-model="newEquip.size" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="工厂简介" :label-width="formLabelWidth">
        <el-input v-model="newEquip.describe"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="add()">确定</el-button>
        <el-button @click="addVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除弹窗 -->
  <el-dialog v-model="deleteVisible" title="警告" width="30%">
    <span>确认删除{{ editingNum }}的工厂</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="remove(editingNum)">确定</el-button>
        <el-button @click="deleteVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import VsudBadge from "@/components/VsudBadge.vue";
// import VsudButton from "@/components/VsudButton.vue";
import img1 from "@/assets/img/team-2.jpg";
import img2 from "@/assets/img/team-3.jpg";
import img3 from "@/assets/img/team-4.jpg";
import img4 from "@/assets/img/team-3.jpg";
import img5 from "@/assets/img/team-2.jpg";
import img6 from "@/assets/img/team-4.jpg";
import { reactive } from "vue-demi";
import { CirclePlusFilled, CloseBold } from "@element-plus/icons";
import { ElMessage } from "element-plus";
export default {
  name: "authors-table",
  props: {
    types: [],
  },
  data() {
    return {
      origin: [],
      searchNum: "",
      showReset: false,
      formLabelWidth: "120px",
      editingNum: "",
      selectEquip: reactive({
        name: "",
        number: "",
        size: "",
        type: "",
        describe: "",
      }),
      newEquip: reactive({
        name: "",
        number: "#EF5735823",
        size: "",
        type: "",
        describe: "",
      }),
      editVisible: false,
      addVisible: false,
      deleteVisible: false,
      img1,
      img2,
      img3,
      img4,
      img5,
      img6,
      form: [
        {
          name: "工厂1",
          number: "张三",
          size: "食品厂",
          type: "在线",
          describe: "张三工厂",
          isOpen: false,
        },
        {
          name: "工厂2",
          number: "李四",
          size: "印刷厂",
          type: "封停",
          describe: "李四工厂",
          isOpen: true,
        },
        {
          name: "工厂3",
          number: "王五",
          size: "食品厂",
          type: "离线",
          describe: "王五工厂",
          isOpen: false,
        },
        {
          name: "工厂4",
          number: "小A",
          size: "食品厂",
          type: "在线",
          describe: "小A工厂",
          isOpen: false,
        },
        {
          name: "工厂5",
          number: "小B",
          size: "药品厂",
          type: "封停",
          describe: "小B工厂",
          isOpen: true,
        },
        {
          name: "工厂6",
          number: "小C",
          size: "食品厂",
          type: "封停",
          describe: "小C工厂",
          isOpen: true,
        },
        {
          name: "工厂7",
          number: "#小D",
          size: "药品厂",
          type: "在线",
          describe: "小D工厂",
          isOpen: false,
        },
      ],
    };
  },
  components: {
    VsudBadge,
    // VsudButton,
    CirclePlusFilled,
    CloseBold,
  },
  watch: {
    form: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
    selectEquip: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
  },
  mounted() {
    document.addEventListener("keyup", this.handleEnterKey);
  },
  unmounted() {
    document.removeEventListener("keyup", this.handleEnterKey);
  },
  methods: {
    set(number, operation) {
      this.editingNum = number;
      if (operation === "edit") {
        let selection = this.form.find((item) => item.number === number);
        Object.assign(this.selectEquip, selection || {});
        this.editVisible = true;
      } else {
        this.deleteVisible = true;
      }
    },
    remove(number) {
      console.log(number);
      this.form = this.form.filter((item) => item.number != number);
      this.deleteVisible = false;
    },
    edit(number) {
      console.log("num", number);
      this.form.forEach((val, index) => {
        if (val.number === number) {
          this.form.splice(index, 1, this.selectEquip);
        }
      });
      this.editVisible = false;
    },
    add() {
      this.form.push(this.newEquip);
      this.addVisible = false;
    },
    handleEnterKey(ev) {
      if (ev.key == "Enter") {
        this.search();
      }
    },
    search() {
      this.origin = this.form;
      if (this.searchNum === "") {
        ElMessage({
          message: "请输入工厂名称/工厂主昵称！",
          type: "error",
        });
      } else {
        this.form = this.form.filter((item) => item.number === this.searchNum.trim());
        if (this.form.length === 0) {
          ElMessage({
            message: "无搜索结果",
            type: "warning",
          });
        }
        this.showReset = true;
      }
    },
    reset() {
      this.form = this.origin;
      this.searchNum = "";
      this.showReset = false;
    },
  },
};
</script>
<style scoped>
.input-group {
  float: right;
  width: 20%;
}
.search-btn {
  cursor: pointer;
}
</style>
